<template>
    <el-row>
        <el-col :span="6">
            <div class="logo">
                <img src="../assets/logo.png" alt="logo" />
            </div>
        </el-col>
        <el-col :span="12" class="title-column">
            <div small-bg>
                <dv-decoration7>
                    <dv-decoration7>
                        <dv-decoration7>
                            <div class="title-container">
                                <span class="title-text">智慧宿舍数据大屏</span>
                            </div>
                        </dv-decoration7>
                    </dv-decoration7>
                </dv-decoration7>
            </div>
        </el-col>
        <el-col :span="6">
            <div class="showTime">
                <dv-decoration1 :color="['white', 'blue']" />
                <DigitalClock />
            </div>
        </el-col>
    </el-row>
    <el-row>
        <el-col :span="24">
            <Number></Number>
            <Pie></Pie>
        </el-col>
    </el-row>
</template>
<script setup>
import DigitalClock from './DigitalClock.vue';
import Number from "../vue/Number.vue";
import Pie from "../vue/Pie.vue";
</script>
<style scoped>
.logo {
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;

    /* 垂直居中 */
    img {
        max-width: 100%;
        /* 确保图片不会超出容器宽度 */
        height: auto;
        /* 保持图片的原始宽高比 */
    }
}

.title-column {
    /* 如果需要，可以在这里设置一些额外的样式 */
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中，但这通常用于flex容器的子项，这里可能需要调整 */
    height: 100px;
    /* 设置一个高度来确保垂直居中有效 */
}

.title-container {
    /* 在这里，我们可能不需要额外的样式，除非你想对容器本身进行样式设置 */
    /* display: flex; 和 justify-content/align-items 可能已经由 .title-column 处理 */
    /* 但为了清晰起见，我们保持它并移除可能的重复样式 */
    display: flex;
    justify-content: center;
    /* 水平居中 */
    align-items: center;
    /* 垂直居中，但在这个上下文中可能不是必需的，因为父元素已经处理了 */
    width: 100%;
    /* 确保容器填满整个el-col */
}

.title-text {
    font-size: 35px;
    /* 设置字体大小 */
    letter-spacing: 5px;
    /* 设置字与字之间的间距，这里用的是空格的等效效果 */
    /* 如果你真的需要在某些字之间插入特定字符（不推荐），你可能需要调整内容或使用伪元素 */
}

.showTime {
    width: 100%;
    height: 100%;
    position: relative;
    /* 设置一个足够的高度来显示时间 */
    display: flex;
    flex-direction: column;
    /* 设置为列方向 */
    justify-content: flex-end;
    /* 内容居中 */
    align-items: center;
    /* 内容居中 */
    padding-bottom: 10px;
    /* 添加一些底部填充，以避免时间文本紧贴容器底部 */
}
</style>